<template>
	<view class="app app-bg">
		<view class="top">
			<u-icon name="arrow-left" size="36" @tap="vk.navigateBack()"></u-icon>
			<text class="tit">举报</text>
			<text class="tip" @tap="checkList">举报记录</text>
		</view>
		<view class="area">
			<view>举报内容：</view>
			<u-input
				placeholder="请填写举报内容"
				v-model="content"
				type="textarea"
				:height="200"
			/>
		</view>
		<view class="area">
			<text>联系方式：</text>
			<u-input
				placeholder="留下您的联系方式 手机 / QQ邮箱"
				v-model="mobile"
				type="text"
			/>
		</view>
		<view class="area">
			<text>相关截图：</text>
			<view class="box">
				<view class="upd" v-for="(item, index) in images">
					<u-icon
						name="minus-circle-fill"
						color="#FF1313"
						size="32"
						@tap="remove(index)"
					></u-icon>
					<u-image width="154" height="154" :src="item" border-radius="12"></u-image>
				</view>
				<image
					src="@/static/mine/img_add.png"
					v-if="images.length < 9"
					class="upd"
					@tap="addThumb"
				></image>
			</view>
		</view>
		<view class="btn" @tap="confirm">提交</view>
	</view>
</template>

<script>
var vk = uni.vk

export default {
	data() {
		return {
			content: "",
			mobile: "",
			images: []
		}
	},
	methods: {
		// 操作图片
		addThumb() {
			uni.chooseImage({
				count: 9 - this.images.length,
				sizeType: ["compressed"],
				success: res => {
					this.images = this.images.concat(res.tempFilePaths)
				}
			})
		},
		remove(index) {
			this.images.splice(index, 1)
		},
		// 提交
		async confirm() {
			const { content, mobile, images } = this
			if (!content) return vk.toast("请填写意见反馈内容")
			if (!mobile) return vk.toast("请填写联系方式")

			// 上传图片
			let arr = []
			for (let i = 0; i < images.length; i++) {
				let res = await vk.uploadFile({
					filePath: images[i],
					suffix: "png",
					provider: "unicloud"
				})
				if (res.success) {
					arr.push(res.url)
				} else {
					return vk.toast("上传失败，请重试")
				}
			}
			this.submit(content, mobile, arr)
		},
		submit(content, mobile, arr) {
			vk.callFunction({
				url: "client/user.sendFeedback",
				title: "提交中...",
				data: { content, mobile, type: 3, arr }
			}).then(() => {
				vk.toast("提交成功", "none", 1000, () => {
					vk.navigateBack()
				})
			})
		},
		checkList() {
			vk.navigateTo("/pages/web-view/report-list")
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	padding: 0 20rpx 24rpx;
}

.top {
	display: flex;
	align-items: center;
	margin: 0 -20rpx;
	font-weight: 700;
	font-size: 32rpx;
	background-color: #fff;
	padding: calc(20rpx + var(--status-bar-height)) 20rpx 20rpx;
	margin-bottom: 20rpx;

	.u-icon {
		flex: 1;
	}

	.tit {
		flex: 1;
		text-align: center;
	}

	.tip {
		flex: 1;
		font-size: 24rpx;
		color: #67c23a;
		font-weight: normal;
		text-align: right;
	}
}

.area {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx 20rpx 12rpx;
	margin-bottom: 26rpx;
	font-size: 26rpx;
	font-weight: bold;

	.u-input {
		font-size: 24rpx;
		font-weight: normal;
	}
}

.box {
	display: flex;
	flex-wrap: wrap;
	margin: 20rpx -10rpx 0 0;

	.upd {
		width: 154rpx;
		height: 154rpx;
		border-radius: 12rpx;
		position: relative;
		margin: 0 14rpx 20rpx 0;
		border: 1rpx solid rgb(179, 179, 179);
	}

	.u-icon {
		position: absolute;
		z-index: 9;
		top: -12rpx;
		right: -12rpx;
	}
}

.btn {
	background-color: #24c388;
	color: #fff;
	border-radius: 44rpx;
	padding: 24rpx 20rpx;
	margin: 160rpx 0 30rpx;
	text-align: center;
	font-size: 28rpx;
}
</style>
